<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登录</title>
    <link rel="stylesheet" href="css/self.css">
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand self-padding-first-border"><img src="./img/TimberBlog.svg" width="150px" height="30px"></img></a>
    <button class="navbar-toggler" id="indexBtn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <!--            主页-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="index.html">
                    <i class="fa fa-home"></i>主页
                    <!--                    <span class="sr-only">(current)</span>-->
                </a>
            </li>
            <!--            分类-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="type.html">
                    <i class="fa fa-folder-open"></i>分类
                </a>
            </li>
            <!--标签-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="http://localhost:8088/demo/label.html">
                    <i class="fa fa-bookmark"></i>标签
                </a>
            </li>

            <!--            时间轴-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="timetable.html">
                    <i class="fa fa-calendar"></i>时间轴
                </a>
            </li>
        </ul>
        <!--        搜索按钮-->
        <form class="form-inline my-2 my-lg-0  self-padding-search-border">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="selfInf.html">
                    <i class="fa fa-user"></i>个人中心
                </a>
            </li>
            <!--编写文章-->
            <li class="nav-item">
                <a class="nav-link self-padding-other-border" href="editor.html">
                    <i class="fa fa-keyboard-o"></i>文章编辑
                </a>
            </li>
        </ul>
    </div>
</nav>
<!--内容-->
<div class="container self-header-border">

    <div class="row">
        <div class="col-md-12">
            <table class="signinTable" >

                <article class="text-center">
                    <form id="LoginForm">
                        <h3>账号登录</h3>
                        <div class="input ">
                            <span class="fa fa-user-circle" aria-hidden="true"></span>
                            <input type="text"  placeholder="账号" name="userAccount" id="userAccount" required />
                        </div>
                        <div class="input">
                            <span class="fa fa-key" aria-hidden="true"></span>
                            <input type="password" placeholder="密码" name="userPwd"  required />
                        </div>
                        <button type="button" id = "btnLogin" class="btn btn-lg">登录</button>
                        <a href="http://localhost:8088/demo/userReg.html">没有账号?</a>
                    </form>
                </article>


            </table>
        </div>
    </div>




</div>
<!--底部-->
<footer>
    <div class="container">
        <br>
        <h6 class="text-center" style="color:white;font-family:'Microsoft YaHei UI'">Copyright © 2021 By TimberBlog</h6>
    </div>
</footer>


</body>

<script src="js/jquery-3.6.0.min.js"></script>

<script>
    //页面加载完毕，执行的函数
    jQuery(function () {
        // 找到btnReg的控件，给其添加一个点击事件
        jQuery("#btnLogin").click(function () {
            //现在要获取控件的数据
            let form = jQuery("#LoginForm").serialize();     //这个语句能获取form里面的所有有名序列（即name属性）
            let account = jQuery("#userAccount").val();

            let str =JSON.stringify(account);
            sessionStorage.setItem("info",str);

            //向服务器法请求，并相应结果
            jQuery.post("user/Account_Login",form,function (rst) {          //rst表示服务器返回的数据

                if(rst){
                    alert("登录成功！");
                    let id = '';
                    id += `${rst.userId}`;
                    alert(id);
                    location.href="index.html";
                }else{
                    alert("登录失败！");

                }
            });     //以post向后台发送数据
        });
    })
</script>
</html>